<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #subjectInput {
            margin: 0 auto;
            width: 500px;
        }

        #contentInput {
            height: 200px;
            width: 500px;
        }

        /*设置登录窗口为一个独立浮动标签*/
        #loginBox {
            /*边框样式*/
            width: 400px;
            height: 213px;
            resize: none;
            overflow: auto;
            box-shadow: 4px 4px 13px #ccc;
            border-radius: 11px;
            padding: 20px;
            background-color: white;
            border: 1px black solid;
            position: fixed; /*设置为悬浮*/
            display: none; /*默认隐藏*/
            /*设置居中*/
            left: 0;
            right: 0;
            margin: auto;
            /*添加动画效果*/
            animation-duration: 0.5s;
            animation-fill-mode: both;
        }

        #reviseBox {
            /*边框样式*/
            width: 400px;
            height: 213px;
            resize: none;
            overflow: auto;
            box-shadow: 4px 4px 13px #ccc;
            border-radius: 11px;
            padding: 20px;
            background-color: white;
            border: 1px black solid;
            position: fixed; /*设置为悬浮*/
            display: none; /*默认隐藏*/
            /*设置居中*/
            left: 0;
            right: 0;
            margin: auto;
            /*添加动画效果*/
            animation-duration: 0.5s;
            animation-fill-mode: both;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        #loginBox button {
            margin: 10px;
            width: 44%;
            padding: 10px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #loginBox button:hover {
            background: #555;
        }

        #loginBox a img:hover {
            animation-duration: 0.5s;
            animation-fill-mode: both;
            animation-name: rotate;
        }

        #reviseBox button {
            margin: 10px;
            width: 95%;
            padding: 10px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #reviseBox button:hover {
            background: #555;
        }

        #reviseBox a img:hover {
            animation-duration: 0.5s;
            animation-fill-mode: both;
            animation-name: rotate;
        }

        #showInvitation {
            border: 1px solid black;
            margin: auto;
        }

        #showInvitation a {
            text-decoration: none;
        }

        #postArea {
            position: absolute;

            bottom: 0;
            left: 32%;

        }

        #postArea button {
            margin: 10px;
            width: 95%;
            padding: 10px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #postArea button:hover {
            background: #555;
        }

        /*从上淡入动画*/
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate3d(0, 100%, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        /*从下淡入动画*/
        @keyframes fadeOutDown {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
                transform: translate3d(0, 100%, 0);
            }
        }

        /*旋转动画*/
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
<h1>厦门大鱼网</h1>
<span id="showLoginInfo">
    <%--条件语句判断session中是否有登录信息，如果有则直接显示登录信息--%>
    <c:choose>
        <c:when test="${sessionScope.user != null}">
            <p>欢迎回来，${sessionScope.user.username}!<a href="javascript:showReviseBox()">修改密码</a>&nbsp;<a
                    href='javascript:logout()'>登出</a></p>
        </c:when>
        <c:otherwise>
            <a href="javascript:showLoginBox()">登录</a>
        </c:otherwise>
    </c:choose>
</span>
<%--登录窗口标签，正常情况下为隐藏--%>
<span id="loginBox">
    <a href="javascript:closeLoginBox()"><img src="img/close.png" width="20px"></a>
    <input type="text" id="username" value="${cookie.username.value}" placeholder="用户名"/><br/>
    <input type="password" id="password" value="${cookie.password.value}" placeholder="密码"/><br/>
    <span><input type="checkbox" id="rememberCheckbox" ${(empty cookie.checkbox.value)?"":"checked"}/>记住密码</span>
    <span id="showLoginNotify" style="font-size: 12px"></span><%--用于显示提示信息--%><br/>
    <button onclick="login()">登录</button>
    <button onclick="register()">注册</button>
</span>
<%--修改密码窗口，正常情况下为隐藏--%>
<span id="reviseBox">
    <a href="javascript:closeReviseBox()"><img src="img/close.png" width="20px"></a>
    <input type="password" id="oldPassword" placeholder="旧密码"/><br/>
    <input type="password" id="newPassword" placeholder="新密码"/><br/>
    <span id="showReviseNotify" style="font-size: 12px"></span><%--用于显示提示信息--%><br/>
    <button onclick="revise()">修改密码</button>
</span>
<%--用于显示帖子的区域--%>
<table id="showInvitation"></table>
<%--权限验证，登录后才可查看发帖功能区--%>
<div id="postArea">
    <c:choose>
        <c:when test="${sessionScope.user != null}">
            <div id="showPostNotify" style="color: red"></div>
            <input id="subjectInput" placeholder="帖子标题"/><br/>
            <textarea id="contentInput" fixed></textarea><br/>
            <button onclick="post()">发帖</button>
        </c:when>
        <c:otherwise>
            <p>发帖请先<a href="javascript:showLoginBox()">登录</a>！</p>
        </c:otherwise>
    </c:choose>
</div>


<script>
    showInvitation();
    let loginBox = document.getElementById("loginBox");
    let reviseBox = document.getElementById("reviseBox");
    let showLoginNotify = document.getElementById("showLoginNotify");
    let showReviseNotify = document.getElementById("showReviseNotify");

    /*展示帖子列表方法，使用ajax实现*/
    function showInvitation() {
        let showInvitation = document.getElementById("showInvitation");
        let str = "<tr><th>总楼层数</th><th>帖子标题</th><th>发帖人</th><th>发帖时间</th><th>回帖人</th><th>最后回帖时间</th></tr>";
        $.ajax({
            url: "invitationServlet",
            data: {
                op: "select"
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data.length !== 0) {
                    for (let i = 0; i < data.length; i++) {
                        let color = "";
                        let prime = "";
                        console.log(data[i].primeMark);
                        if (data[i].primeMark === "1") {
                            console.log("ok")
                            color = "red";
                            prime = "[精]";
                        }
                        str += "<tr><td>" + data[i].contentCount +
                            "</td><td><a href='contentServlet?invId=" + data[i].id + "' " +
                            "style='color: " + color + "'>" + prime + data[i].subject +
                            "</a></td><td>" + data[i].creatorName +
                            "</td><td>" + data[i].creatAt +
                            "</td><td>" + data[i].updaterName +
                            "</td><td>" + data[i].updateAt + "</td></tr>";
                    }
                } else {
                    str = "<p>当前暂无帖子。</p>";/*没有获得数据时显示*/
                }
                showInvitation.innerHTML = str;
            }
        })
    }

    /*发帖方法，使用ajax实现*/
    function post() {
        let showPostNotify = document.getElementById("showPostNotify");
        let subjectInput = document.getElementById("subjectInput").value;
        let contentInput = document.getElementById("contentInput").value;
        if (subjectInput === "" || subjectInput==null) {
            showPostNotify.innerText = "帖子标题不能为空！";

        } else if (contentInput === "" || contentInput==null) {
            showPostNotify.innerText = "帖子内容不能为空！";

        } else {
            $.ajax({
                url: "invitationServlet",
                data: {
                    op: "post",
                    subjectInput: subjectInput,
                    contentInput: contentInput,
                    id: "${sessionScope.user.id}"
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    if (data) {
                        alert("发帖成功！")
                        location.reload();
                    } else {
                        alert("发帖失败！")
                    }
                }
            })
        }
    }

    /*显示登录悬浮窗*/
    function showLoginBox() {
        loginBox.style.display = "block";
        loginBox.style.animationName = "fadeInUp";
    }

    /*隐藏登录悬浮窗*/
    function closeLoginBox() {
        loginBox.style.animationName = "fadeOutDown";
        setTimeout(function () {
            loginBox.style.display = "none";
        }, 500);
    }

    /*显示修改密码悬浮窗*/
    function showReviseBox() {
        reviseBox.style.display = "block";
        reviseBox.style.animationName = "fadeInUp";
    }

    function closeReviseBox() {
        reviseBox.style.animationName = "fadeOutDown";
        setTimeout(function () {
            reviseBox.style.display = "none";
        }, 500);
    }

    /*登录方法，使用ajax实现*/
    function login() {
        let rememberCheckbox = document.getElementById("rememberCheckbox").checked;
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        if (username === "") {
            showLoginNotify.style.color = "red";
            showLoginNotify.innerText = "登录失败，用户名不能为空！"
        } else if (password === "") {
            showLoginNotify.style.color = "red";
            showLoginNotify.innerText = "登录失败，密码不能为空！"
        } else {
            $.ajax({
                url: "userServlet",
                data: {
                    op: "login",
                    username: username,
                    password: password,
                    isRemember: rememberCheckbox
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        showLoginNotify.style.color = "green";
                        showLoginNotify.innerText = "登录成功！";
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    } else {
                        showLoginNotify.style.color = "red";
                        showLoginNotify.innerText = "登录失败，请检查您的用户名或密码有无错误！"
                    }
                }
            })
        }
    }

    /*修改密码方法*/
    function revise() {

        let id = "";
        if (!${empty sessionScope.user}) {
            id = "${sessionScope.user.id}";
        }
        let oldPassword = document.getElementById("oldPassword").value;
        let newPassword = document.getElementById("newPassword").value;
        if (oldPassword === "") {
            showReviseNotify.style.color = "red";
            showReviseNotify.innerText = "修改失败，旧密码不能为空！"
        } else if (newPassword === "") {
            showReviseNotify.style.color = "red";
            showReviseNotify.innerText = "修改失败，新密码不能为空！"
        } else
            $.ajax({
                url: "userServlet",
                data: {
                    op: "revise",
                    id: id,
                    oldPassword: oldPassword,
                    newPassword: newPassword
                },
                type: "get",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data) {
                        showReviseNotify.style.color = "green";
                        showReviseNotify.innerText = "修改密码成功！请重新登录。";
                        setTimeout(logout, 1000);
                    } else {
                        showReviseNotify.style.color = "red";
                        showReviseNotify.innerText = "修改失败，请确认原密码有无错误。"
                    }
                }
            })

    }

    /*登出方法，使用ajax实现*/
    function logout() {
        $.ajax({
            url: "userServlet",
            data: {
                op: "logout",
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data) {
                    /*直接刷新页面，重置登录状态*/
                    alert("登出成功！请重新登录。")
                    location.reload();
                }
            }
        })
    }

    /*注册方法，使用ajax实现*/
    function register() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        if (username === "") {
            showLoginNotify.style.color = "red";
            showLoginNotify.innerText = "注册失败，用户名不能为空！"

        } else if (password === "") {
            showLoginNotify.style.color = "red";
            showLoginNotify.innerText = "注册失败，密码不能为空！"
        } else {
            $.ajax({
                /*servlet地址，暂时留空*/
                url: "userServlet",
                data: {
                    op: "register",
                    username: username,
                    password: password
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data) {
                        showLoginNotify.style.color = "green";
                        showLoginNotify.innerText = "注册成功！已为您自动登录。";
                        /*注册成功自动调用登录方法*/
                        setTimeout(login, 1000);
                    } else {
                        showLoginNotify.style.color = "red";
                        showLoginNotify.innerText = "注册失败！请检查您的输入内容有无错误。";
                    }
                }
            })
        }

    }
</script>
</body>
</html>